<template>
	<header>
		<div class="container">
			<div class="logo">
				<img src="https://rs.dance365.com/logo@3xrenew3.png" alt="中舞网">
			</div>
			<nav class="nav">
				<router-link to="/home/resource/recommend" :class="route.path.includes('/resource')?'active':''">资源</router-link>
				<router-link to="/home/course" :class="route.path.includes('/course')?'active':''">课程</router-link>
				<router-link to="" :class="route.path.includes('/training')?'active':''" :data-route="'/home/training'" @click="routeHandler($event)">练习室</router-link>
				<router-link to="" :class="route.path.includes('/communication')?'active':''" :data-route="'/home/communication'" @click="routeHandler($event)">交流</router-link>
				<router-link to="" :class="route.path.includes('/center')?'active':''" :data-route="'/home/center'" @click="routeHandler($event)">我的</router-link>
			</nav>
			<div class="header-right">
				<a href="" class="download">下载app</a>
				<button>发布</button>
				<button class="login" v-if="!userInfoStore.userinfo.avatar" @click="toLogin">登录</button>
				
				<el-dropdown v-else class="avatar">
					<span class="el-dropdown-link">
						<img class="avatar"  :src="userInfoStore.userinfo.avatar" alt="">
						
					</span>
					<template #dropdown>
						<el-dropdown-menu>
							<el-dropdown-item @click="logOut">退出登录</el-dropdown-item>
						</el-dropdown-menu>
					</template>
				</el-dropdown>
			</div>
		</div>
	</header>
</template>

<script setup lang="ts">
import { useUserInfoStore } from '@/stores/userInfo';
import { useRouter,useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
const userInfoStore = useUserInfoStore()
const router = useRouter()
const route = useRoute()
const routeHandler = (e: any)=>{
	if(userInfoStore.userinfo.avatar)  router.push(e.target.dataset.route)
	else{
		userInfoStore.showModel = true
		userInfoStore.route = e.target.dataset.route
	}
}
const toLogin = () => {
	router.push('/login?redirect='+route.path)
}
const logOut=()=>{
	userInfoStore.reset();
	router.push('/home')
	ElMessage.success('退出成功,已跳转到首页！')
}

</script>

<style scoped>
	.container {
		width: 1200px;
		margin: 0px auto;
		display: flex;
	}

header {
	height: 60px;
	box-shadow: 4px 0 9px #c1c1c1;
}

/* logo */
.logo {
	width: 128px;
	line-height: 60px;
	margin-right: 30px;
}

.logo img {
	height: 30px;
	vertical-align: middle;
}

/* nav */
.nav {
	width: 458px;
	display: flex;
	justify-content: space-between;
	line-height: 60px;
}

.nav a {
	font-size: 18px;
	text-decoration: none;
	color: #101010;
}

.nav a:hover {
	color: #f93684;
}

.nav .active {
	color: #f93684;
}

/* header-right */
.header-right {
	flex: 1;
	text-align: right;
	line-height: 60px;
	align-items: center;
}

.header-right a {
	text-decoration: none;
	color: #101010;
}

.download {
	margin: 21px 30px 22px 0;
}

.download:before {
	content: "\eac3";
	font-family: "iconfont";
	font-size: 25px;
	vertical-align: middle;
}

.header-right button {
	border-radius: 15px;
	width: 75px;
	height: 30px;
	padding: 0;
	background-color: #f93684;
	color: #fff;
	border: 1px solid #dcdfe6;
	font-size: 16px;
	text-align: center;
	line-height: 29px;

}

.login {
	padding: 10px;
	margin-left: 30px;
}

.header-right button.login {
	background-color: #3687f9;
}

.avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	vertical-align: middle;
	margin-left: 15px;
}
</style>
